<template>
  <div class="wrap">
    <div class="tp">
      <div class="icon"> 
        <p class="iconfont icon-saoyisao"></p>
        </div>
        <div class="head">
          <div class="headbig"><img src="kk2.jpg" alt=""></div>
          <router-link to="/head" class="Nickname">
              <div class="nick">
              <span class="num" v-if="bool==false">立即登录</span>
              <span class="num" v-else>慕课{{tousername()}}</span>
              </div>
              <div class="learn">
                  <div class="learn-time">
                  <span>学习时长</span>&nbsp;&nbsp;<span>xxx</span>
                  </div>
                  <div class="exp">
                      <span>经验</span>&nbsp;&nbsp;&nbsp;
                      <span>xx</span>
                  </div>
                </div>
          </router-link>
        </div>
        <div class="top">
            <div class="btn">
              <router-link to="/guanzhu">
                <div class="Attention">
                    关注 <span>1</span>
                </div>
              </router-link>
              <router-link to="/guanzhu">
                <div class="Fans">
                      粉丝  <span>0</span>
                </div>
                 </router-link>
                <router-link to="/math" class="Integral">
                    积分 <span>0</span>
                </router-link>
            </div>
        </div>
    </div>
    <Accountm/>
    <Bottom/>
  
  </div>
</template>

<script>

import Accountm from './accountm.vue'
export default {
     mounted(){
        let token = JSON.parse(localStorage.getItem("token"));
            if(token){
                this.bool = true
            }
            console.log(token)
    },
components:{
Accountm
},
data(){
      return{
        username:'',
        bool:false
      }  
    },
  methods:{
    tousername(){
      if(localStorage.getItem("token")){
                this.bool = true
            }
        let token = JSON.parse(localStorage.getItem("token"));
            console.log(this.bool);
            this.username = token.data.username
            return  this.username
        }
  }
}
</script>

<style scoped>
.wrap{
  width: 100%;
  height: 100%;
  background-color:#f3f4f6;

}
   .tp{
     width: 100%;
     height: 1.62rem;
    
   }
   .icon{
     width: 100%;
     height: 0.37rem;
   }
   .icon p{
     font-weight: bold;
     font-size: 0.2rem;
     position: relative;
     left: 3.3rem;
     top: 0.1rem;
   }
   .head{
     width: 100%;
     height:0.83rem;
     display: flex;
   }
   .headbig{
     width: 0.9rem;
     height: 0.83rem;
   }
   .headbig img{
     border-radius: 50%;
     margin: 0.13rem 0.16rem;
   }
   .Nickname{
     flex: 1;
     height: 0.83rem;
   }
   .nick{
     height: 0.47rem;
     font-size: 0.2rem;
   }
   .nick span{
     line-height: 0.65rem;
   }
   .learn{
     height: 0.25rem;
     font-size: 0.12rem;
     line-height: 0.25rem;
     color: #6666;
     display: flex;
   }
   .learn-time{
     width: 0.92rem;
     height: 0.25rem;
   }
   .exp{
     width: 0.76rem;
   }
   .top{
     width: 100%;
     height: 0.42rem;
   }
   .btn{
     width: 3.45rem;
     height: 0.42rem;
     margin: 0 auto;
     display: flex;
   }
   .Attention{
     width: 1.15rem;
     text-align: center;
     line-height: 0.42rem;
     font-size: 0.15rem;
   }
   .Fans{
     width: 1.15rem;
     text-align: center;
     line-height: 0.42rem;
     font-size: 0.15rem;
   }
   .Integral{
     width: 1.15rem;
     text-align: center;
     line-height: 0.42rem;
     font-size: 0.15rem;

   }

</style>